<template>
  <div class="container common-box">
    <div class="nav-bar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container-main">
      <MainAsideNav
        :data="level1Data"
        topText="添加菜单"
        topType="add"
        @select="changeData"
        @handle="menuHandle"
        @btnHandle="menuInfo"
      />
      <div class="main-table">
        <div class="table-title">
          当前菜单:
          <span v-if="currentMenu != '暂未选择'">{{ currentMenu }}</span>
        </div>
        <el-table :data="tableData" border style="width: 100%" size="small" :v-loading="tableLoading" max-height="500">
          <el-table-column label="序号" width="80" type="index"/>
          <el-table-column label="菜单名称" width="200">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="路由名称" width="200" />
          <el-table-column label="路径链接" min-width="200">
            <template slot-scope="{row}">
              <span>{{ row.link }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" min-width="200">
            <template slot-scope="{row}">
              <span>{{ row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" width="200" />
          <el-table-column
            label="操作"
            width="200"
            fixed="right" >
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="menuHandle({type: 'see', item: row})">查看</el-button>
              <el-button type="text" size="small" @click="menuHandle({type: 'edit', item: row})">编辑</el-button>
              <el-button type="text" size="small" @click="menuHandle({type: 'delete', item: row})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog :title="menuType == 'add' ? '添加菜单' :  menuType == 'see' ? '查看菜单' : '修改菜单'" :visible.sync="menuDialog">
      <el-form ref="menuForm" :model="menuData" label-width="100px" :rules="rules">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menuData.name" size="mini" :disabled="menuType == 'see'" :maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="菜单级别" prop="depth">
          <el-select v-model="menuData.depth" placeholder="请选择菜单级别" size="mini" :disabled="menuType == 'see'">
            <el-option label="一级菜单" value="1"></el-option>
            <el-option label="二级菜单" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="父级菜单" v-if="menuData.depth  == 2" prop="parent">
          <el-select v-model="menuData.parent" placeholder="请选择父级菜单" size="mini" :disabled="menuType == 'see'">
            <el-option
            v-for="(item, index) in level1Data" :key="index"
            :label="item.name"
            :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单链接" prop="link">
          <el-input v-model="menuData.link" size="mini" :disabled="menuType == 'see'" :maxlength="20"></el-input>
        </el-form-item>
        <!-- <el-form-item label="菜单排序" prop="position">
          <el-input v-model="menuData.position" size="mini"></el-input>
        </el-form-item> -->
        <el-form-item label="菜单状态" prop="status">
          <el-radio-group v-model="menuData.status" size="mini" :disabled="menuType == 'see'">
            <el-radio label="0">无效</el-radio>
            <el-radio label="1">显示</el-radio>
            <el-radio label="2">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单备注" prop="remark">
          <el-input type="textarea" v-model="menuData.remark" size="mini" :disabled="menuType == 'see'" :maxlength="200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="menuType != 'see'">
        <el-button @click="menuDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitMenu()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MainAsideNav from '../../components/Common/MainAsideNav'
export default {
  created() {
    this._getMenuTree()
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      currentMenu: '暂未选择',
      currentMenuId: '',
      currentMenuIndex: 0,
      level1Data: [],
      menuDialog: false,
      menuData: {},
      menuType: '',
      rules: {
        // name: [
        //     { required: true, message: '请输入菜单名称', trigger: 'blur' },
        // ],
        // depth: [
        //     { required: true, message: '请选择菜单级别', trigger: 'change' },
        // ],
        // parent: [
        //     { required: true, message: '请选择父级菜单', trigger: 'change' },
        // ],
        // link: [
        //     { required: true, message: '请输入菜单链接', trigger: 'blur' },
        // ],
        // position: [
        //     { required: true, message: '请输入菜单排序', trigger: 'blur' },
        // ],
        // status: [
        //     { required: true, message: '请选择菜单状态', trigger: 'change' },
        // ],
      }
    }
  },

  components: {
    MainAsideNav
  },

  computed: {},

  methods: {
    changeData({item, index}) {
      this.tableLoading = true
      this.currentMenuIndex = index
      this.$nextTick(() => {
        this.tableLoading = false
        this.tableData = item.children
        this.currentMenu = item.name
      })
    },
    // 打开新增、修改菜单
    menuInfo(type) {
      this.menuType = type
      this.menuDialog = true
      this.menuData = {}
    },
    // 菜单相关操作
    menuHandle({ type, item }) {
      this.menuType = type
      this.currentMenuId = item.id
      if (type === 'delete') {
        this.doMenuDeleteInfo(item.id)
      } else if (type === 'edit' || type === 'see') {
        this.menuDialog = true
        this._getMenuLoad(item.id)
      }
    },
    // 提交菜单表单
    submitMenu() {
      this.$refs['menuForm'].validate((valid) => {
        if (valid) {
          let data = {
            name: this.menuData.name,
            depth: this.menuData.depth,
            link: this.menuData.link,
            status: this.menuData.status,
            remark: this.menuData.remark,
          }

          if (+this.menuData.depth === 2 && this.menuData.parent) {
            data.parent = this.menuData.parent
          }

          let API = 'menuCreate'
          if (this.menuType === 'edit') {
            API = 'menuUpdate'
          }

          this.$api[API](data, this.currentMenuId).then(res => {
            if (res.code === 200) {
              this.$message.success('添加成功')
              this.menuData = {}
              this.menuDialog = false
              this._getMenuTree()
            }
          })
        }
      })
    },
    // 处理菜单树
    dealWithTree(data, trees) {
      let souce = data.filter(item => item.parent)

      for (let t = 0; t < this[trees].length; t++) {
        this[trees][t].children = []
        for (let i = 0; i < souce.length; i++) {
          if (souce[i].parent === this[trees][t].id) {
            this[trees][t].children.push(souce[i])
          }
        }
      }
    },
    // 查询菜单目录树
    _getMenuTree() {
      this.tableLoading = true
      this.$api.menuPage({
        // mark: 'tree'
        page: 1,
        size: 10000
      }).then(res => {
        if (res.code === 200) {
          this.tableLoading = false
          this.level1Data = res.data.rows.filter(item => !item.parent)
          this.dealWithTree(res.data.rows, 'level1Data')
          this.tableData = this.level1Data[this.currentMenuIndex].children
        }
      })
    },
    // 获取对应菜单详情
    _getMenuLoad(id) {
      this.$api.menuLoad(id)
        .then(res => {
          if (res.code === 200) {
            this.menuData = res.data
          }
        })
    },
    // 删除单个菜单
    doMenuDeleteInfo(id) {
      this.$confirm(`您真的要删除此菜单吗`, `温馨提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$api.menuDeleteInfo(id)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this._getMenuTree()
            } else {
              this.$message.warning(res.text || '服务器出现错误')
            }
          })
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.container-main{
  display: flex;
}

.main-table{
  padding: 10px 0;
  width: calc(100% - 120px);
  box-sizing: border-box;
  margin-left: 20px;
}

.table-title{
  padding-left: 20px;
  margin-bottom: 10px;
  border-left: 3px solid #eee;
  span{
    font-weight: bold;
    margin-left: 10px;
  }
}
</style>
